<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/icon/demo.css">
    <link rel="stylesheet" href="./css/icon/iconfont.css">
    <title>29-pay-img</title>
</head>

<body>
    <div class="cont">
        <!-- 1-1
        Recent上边部分（圆球背景、横向隐藏、icon图标宫格） -->
        <div class="homeTopBox">
            <!-- 最大背景圆球 -->
            <div class="roundMaxBox">
                <!-- 中间背景圆球 -->
                <div class="roundContBox">
                    <!-- 倒数第二小背景圆球 -->
                    <div class="roundMinBox">
                        <!-- 最小背景圆球 -->
                        <div class="roundBox">
                        </div>
                    </div>
                </div>
            </div>
            <!-- welcome -->
            <div class="WelcomeBox flex_bet">
                <div class="txtLeftBox">
                    <p>Monday 20th December</p>
                    <h2>Welcome</h2>
                </div>
                <div class="iconRigheBox">
                    <ul>
                        <li>
                            <img src="./images/huaban_03.png" alt="">
                        </li>
                        <li>
                            <img src="./images/tixing_03.png" alt="">
                            <div class="supBox">3</div>
                        </li>
                        <li>
                            <img src="./images/3.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 横向滑动银行卡 -->
            <div class="cardBox">
                <ul class="flex_bet">
                    <li>
                        <div class="zhezhao">
                            <div class="topBox">
                                <span>Compant Account</span>
                                <div class="gengduoIcon flex_cent"><img src="./images/gengduo_03.png" alt=""></div>
                            </div>
                            <div class="contBox flex_bet">
                                <p>Click for Balance</p>
                            </div>
                            <div class="bottBox">
                                <span>1234 5678 1234 5661</span>
                                <span>08 / 25</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="zhezhao">
                            <div class="topBox">
                                <span>Compant Account</span>
                                <div class="gengduoIcon flex_cent"><img src="./images/gengduo_03.png" alt=""></div>
                            </div>
                            <div class="contBox flex_bet">
                                <p>Click for Balance</p>
                            </div>
                            <div class="bottBox">
                                <span>1234 5678 1234 5661</span>
                                <span>08 / 25</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="zhezhao">
                            <div class="topBox">
                                <span>Compant Account</span>
                                <div class="gengduoIcon flex_cent"><img src="./images/gengduo_03.png" alt=""></div>
                            </div>
                            <div class="contBox flex_bet">
                                <p>Click for Balance</p>
                            </div>
                            <div class="bottBox">
                                <span>1234 5678 1234 5661</span>
                                <span>08 / 25</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 图标宫格 -->
            <div class="gridBox">
                <ul class="flex_bet">
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/transfer.png" alt="">
                        </div>
                        <p>Transfer</p>
                    </li>
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/request.png" alt="">
                        </div>
                        <p>Request</p>
                    </li>
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/exchange.png" alt="">
                        </div>
                        <p>Exchange</p>
                    </li>
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/bills.png" alt="">
                        </div>
                        <p>Bills</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Recent Activity -->
        <div class="RecentBox">
            <!-- 标题栏 -->
            <div class="titleBox flex_bet">
                <h2>Recent Activity</h2>
                <span>View All</span>
            </div>
            <!-- 内容 -->
            <div class="contBox">
                <ul>
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/google1-1.png" alt="">
                        </div>
                        <div class="titleBox">
                            <h3>Google Ads</h3>
                            <span>14th March 2021</span>
                        </div>
                        <div class="priceBox">
                            <h3>$150.55</h3>
                            <p>Bill Payment</p>
                        </div>
                    </li>
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/bit.png" alt="">
                        </div>
                        <div class="titleBox">
                            <h3>Bitcoin</h3>
                            <span>14th March 2021</span>
                        </div>
                        <div class="priceBox">
                            <h3>+0.315%</h3>
                            <p>Stock Update</p>
                        </div>
                    </li>
                    <li>
                        <div class="iconBox flex_cent">
                            <img src="./images/dividends.png" alt="">
                        </div>
                        <div class="titleBox">
                            <h3>Dividends</h3>
                            <span>13th March 2021</span>
                        </div>
                        <div class="priceBox">
                            <h3>$950.00</h3>
                            <p>Wire Transfer</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Account Activity -->
        <div class="AccountBox">
            <!-- 标题栏 -->
            <div class="titleBox flex_bet">
                <h2>Account Activity</h2>
                <span>View All</span>
            </div>
            <div class="checkBox">
                <ul>
                    <li>
                        <div class="icon">
                            <img src="./images/account.png" alt="">
                        </div>
                        <div class="text">
                            <p>Withdrawal of funds to your</p>
                            <p>Account has been successful.</p>
                        </div>
                        <div class="back">
                            <img src="./images/accout2.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Send Money -->
        <div class="SendBox">
            <!-- 标题栏 -->
            <div class="titleBox flex_bet">
                <h2>Send Money</h2>
                <span>View All</span>
            </div>
            <!-- 横向滚动 -->
            <div class="iconRollBox">
                <ul>
                    <li>
                        <img src="./images/image3.jpg" alt="">
                        <p>Johnatan</p>
                    </li>
                    <li>
                        <img src="./images/image4.jpg" alt="">
                        <p>Alexandra</p>
                    </li>
                    <li>
                        <img src="./images/image5.jpg" alt="">
                        <p>Juanita</p>
                    </li>
                    <li>
                        <img src="./images/image3.jpg" alt="">
                        <p>Danielle</p>
                    </li>
                    <li>
                        <img src="./images/image4.jpg" alt="">
                        <p>Johnatan</p>
                    </li>
                    <li>
                        <img src="./images/image5.jpg" alt="">
                        <p>Juanita</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 3 Settings -->
        <div class="SettingsBox">
            <!-- 标签切换 -->
            <div class="TabsBox">
                <input type="radio" name="chk1" id="chk1" checked>
                <input type="radio" name="chk1" id="chk2">
                <input type="radio" name="chk1" id="chk3">
                <ul>
                    <div class="bgBox"></div>
                    <label for="chk1">
                        <li>
                            <h3>Settings</h3>
                        </li>
                    </label>

                    <label for="chk2">
                        <li>
                            <h3>History</h3>
                        </li>
                    </label>

                    <label for="chk3">
                        <li>
                            <h3>Activity</h3>
                        </li>
                    </label>
                </ul>
            </div>
            <!-- 设置功能列表 -->
            <div class="domainBox">
                <ul>
                    <!-- Online -->
                    <li>
                        <div class="iconBox">
                            <img src="./images/set1.png" alt="">
                        </div>
                        <div class="txtBox">
                            <h3>Use Online Payments</h3>
                            <p>Use this card to pay online</p>
                        </div>
                        <input type="checkbox" name="chkButtonBox" id="chkButtonBox">
                        <label for="chkButtonBox">
                            <div class="buttonBox"></div>
                        </label>
                    </li>
                    <!-- NFC -->
                    <li>
                        <div class="iconBox">
                            <img src="./images/set2.png" alt="">
                        </div>
                        <div class="txtBox">
                            <h3>Use NFC Payments</h3>
                            <p>Pay With Card Contactless</p>
                        </div>
                        <input type="checkbox" name="chkButtonBox_wifi" id="chkButtonBox_wifi" checked>
                        <label for="chkButtonBox_wifi">
                            <div class="buttonBox"></div>
                        </label>
                    </li>
                    <!-- Change -->
                    <li>
                        <div class="iconBox">
                            <img src="./images/set3.png" alt="">
                        </div>
                        <div class="txtBox">
                            <h3>Change Card Name</h3>
                        </div>
                        <div class="forwardBox"></div>
                    </li>
                    <!-- Remove -->
                    <li>
                        <div class="iconBox">
                            <img src="./images/set4.png" alt="">
                        </div>
                        <div class="txtBox">
                            <h3>Remove this Card</h3>
                        </div>
                        <div class="forwardBox"></div>
                    </li>
                    <!-- Report -->
                    <li>
                        <div class="iconBox">
                            <img src="./images/set5.png" alt="">
                        </div>
                        <div class="txtBox">
                            <h3>Report Lost or Stolen</h3>
                        </div>
                        <div class="forwardBox"></div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 4 Activity -->
        <div class="ActivityBox">
            <div class="checkBox">
                <ul>
                    <li>
                        <div class="icon">
                            <img src="./images/account.png" alt="">
                        </div>
                        <div class="text">
                            <p>Withdrawal of funds to your</p>
                            <p>Account has been successful.</p>
                        </div>
                        <div class="back">
                            <img src="./images/cuohao.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="ActTabsBox">
                <!-- 标签切换 -->
                <div class="TabsBox">
                    <input type="radio" name="chkActivityBox1" id="chkActivityBox1" checked>
                    <input type="radio" name="chkActivityBox1" id="chkActivityBox2">
                    <input type="radio" name="chkActivityBox1" id="chkActivityBox3">
                    <ul>
                        <div class="bgBox"></div>
                        <label for="chkActivityBox1">
                            <li>
                                <h3>Recent</h3>
                            </li>
                        </label>

                        <label for="chkActivityBox2">
                            <li>
                                <h3>Transfers</h3>
                            </li>
                        </label>

                        <label for="chkActivityBox3">
                            <li>
                                <h3>Payments</h3>
                            </li>
                        </label>
                    </ul>
                </div>
                <!-- 设置功能列表 -->
                <div class="ActdomainBox">
                    <ul>
                        <!-- Online -->
                        <li>
                            <div class="iconBox">

                            </div>
                            <div class="txtBox">
                                <h3>Karla Black</h3>
                                <p>12th March 2021</p>
                            </div>
                            <div class="PriceBox">
                                <p>$150.55</p>
                                <p>Received</p>
                            </div>
                        </li>
                        <!-- NFC -->
                        <li>
                            <div class="iconBox">
                                <img src="./images/wit.png" alt="">
                            </div>
                            <div class="txtBox">
                                <h3>Withdrawal</h3>
                                <p>12th March 2021</p>
                            </div>
                            <input type="checkbox" name="chkButtonBox_wifi" id="chkButtonBox_wifi" checked>
                            <div class="PriceBox">
                                <p>$345.31</p>
                                <p>Main Account</p>
                            </div>
                        </li>
                        <!-- Change -->
                        <li>
                            <div class="iconBox">
                                <img src="./images/Goo.png" alt="">
                            </div>
                            <div class="txtBox">
                                <h3>Google Ads</h3>
                                <p>14th March 2021</p>
                            </div>
                            <div class="PriceBox">
                                <p>$324.55</p>
                                <p>Bill Payment</p>
                            </div>
                        </li>
                        <!-- Remove -->
                        <li>
                            <div class="iconBox">
                                <img src="./images/Kar.png" alt="">
                            </div>
                            <div class="txtBox">
                                <h3>Karla Black</h3>
                                <p>Awaiting Approval</p>
                            </div>
                            <button>DETAILS</button>
                        </li>
                        <!-- Report -->
                        <li>
                            <div class="iconBox">
                                <img src="./images/Ver.png" alt="">
                            </div>
                            <div class="txtBox">
                                <h3>Verification</h3>
                                <p>Action Required</p>
                            </div>
                            <button>VERIFY</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 5 IconGridBox -->
        <div class="IconGridBox">
            <div class="gridBox">
                <ul>
                    <li>
                        <div class="iconBox">
                            <img src="./images/exchange5.png" alt="">
                        </div>
                        <h3>Exchange</h3>
                        <p>Convert Currency</p>
                    </li>
                    <li>
                        <div class="iconBox">
                            <img src="./images/pay.png" alt="">
                        </div>
                        <h3>Pay a Bill</h3>
                        <p>Bills and Invoices</p>
                    </li>
                    <li>
                        <div class="iconBox">
                            <img src="./images/req5.png" alt="">
                        </div>
                        <h3>Request</h3>
                        <p>Request or Dcposit</p>
                    </li>
                    <li>
                        <div class="iconBox">
                            <img src="./images/tran5.png" alt="">
                        </div>
                        <h3>Transfer</h3>
                        <p>Move and Send</p>
                    </li>
                </ul>
            </div>
            <!-- Account Reports -->
            <div class="accountBox">
                <div class="iconBox flex_cent">
                    <img src="./images/acc5.png" alt="">
                </div>
                <div class="txtBox">
                    <h3>Account Reports</h3>
                    <p>See your Payment Statistics.</p>
                </div>
            </div>
        </div>
        <!-- footerBox -->
        <div class="footerBox">
            <div class="box">
                <ul>
                    <li>
                        <span class="iconfont icon-Cards"></span>
                        <p>Cards</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tongjijisuan"></span>
                        <p>Activity</p>
                    </li>
                    <li>
                        <div class="IconHomeBox flex_cent">
                            <span class="iconfont icon-home"></span>
                        </div>
                        <p>Home</p>
                    </li>
                    <li>
                        <span class="iconfont icon-zhangbenzhangdanjizhangzhangbu"></span>
                        <p>Payments</p>
                    </li>
                    <li>
                        <span class="iconfont icon-gengduo"></span>
                        <p>More</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>